<template>
	<view>
		<view class="imageList">
			<view v-if="imgList.length>0" class="imgWrap" v-for="(item,index) in imgList" :key="index">
				<image class="img" @tap="previewImage(index)" :src="`${httpUrl}/app/file/viewFile?fileId=${item}`">
				</image>
			</view>
			<view v-if="videoSrc" class="videoWrap">
				<video class="video" object-fit="cover"
					:poster="`${httpUrl}/app/file/viewFile?fileId=${videoSrc}&process=video/snapshot,t_1000,f_jpg,w_${attachFiles[0].width},h_${attachFiles[0].height},m_fast`"
					:src="`${httpUrl}/app/file/viewFile?fileId=${videoSrc}`"></video>
			</view>
		</view>
		<view class="titleWrap">
			<input style="width: 550rpx;" placeholder="好的标题更容易吸引眼球哦～" disabled
				placeholder-style="font-size:32rpx;color:#8C8C8C;font-weight: bold;" v-model="title" maxlength="20" />
		</view>
		<view class="detailsWrap">
			<textarea style="width: 100%;height: 278rpx;" placeholder="分享新鲜事..." disabled
				placeholder-style="font-size:28rpx;color:#8C8C8C;" v-model="content" maxlength="500" />
			<view style="width: 100%;height: 42rpx;display: flex;">
			</view>
			<view class="sparkleWrap">
				<view class="sparkle">
					<image class="location" src="../../static/img/add-location.png"></image>
					<text
						style="color: #262626;font-size: 28rpx;">{{locationObject.name.length>10?locationObject.name.slice(0,9)+'...':locationObject.name}}</text>
					<image class="chevronRight" src="../../static/img/chevronRight.png"></image>
				</view>
				<view class="sparkle" style="margin-left: 24rpx;">
					<text style="color: #262626;font-size: 28rpx;margin-left: 29rpx;">#</text>
					<text
						style="color: #262626;font-size: 28rpx;">{{talkObject.subjectName.length>4?talkObject.subjectName.slice(0,3)+'...':talkObject.subjectName}}</text>
					<image class="chevronRight" src="../../static/img/chevronRight.png"></image>
				</view>
			</view>
		</view>
		<view class="remarkWrap">
			<textarea style="width: 100%;height: 278rpx;" placeholder="发表你的看法..."
				placeholder-style="font-size:28rpx;color:#8C8C8C;" v-model="remark" maxlength="500" />
		</view>
		<view style="width: 100%;height: 20rpx;background: #F6F7F9;"></view>
		<view @tap="toWho" class="whoWrap">
			<view class="whoLeft">
				<image style="width: 32rpx;height: 32rpx;" src="../../static/img/add-location.png"></image>
				<text style="color: #262626;font-size: 32rpx;margin-left: 8rpx;font-weight: bold;">谁能看见</text>
			</view>
			<view class="whoRight">
				<text style="color: #262626;font-size: 28rpx;margin-left: 15rpx;">{{whoToSee.val}}</text>
				<image class="whoRightImg" src="../../static/img/chevronRight.png"></image>
			</view>
		</view>
		<view class="beijing"></view>
		<view class="releaseWrap">
			<view class="quxiao">取消</view>
			<view @tap="submit" class="release">发布</view>
		</view>
	</view>
	<uni-popup ref="popup" type="bottom" border-radius="32rpx 32rpx 0 0">
		<view class="framePop">
			<view class="topPop">
				<view v-for="(item,index) in whoList" :key="index" class="pop">
					<text v-if="index<4" class="popText">{{item.lable}}</text>
					<checkbox @tap="choosePop(index)" v-if="index<4" iconColor="#ff374e" style="margin-right: 24rpx;"
						:checked="item.check" />
				</view>
			</view>
			<view class="bottomPop">
				<view @tap="choosePop(index+4)" v-for="(item,index) in whoList.slice(4,6)" :key="index" class="pop">
					<text class="popText">{{item.lable}}</text>
					<image style="width: 32rpx;height: 32rpx;margin-right: 38rpx;"
						src="../../static/img/chevronRight.png"></image>
				</view>
			</view>
		</view>
	</uni-popup>
	<uni-popup ref="popups" type="bottom" border-radius="32rpx 32rpx 0 0">
		<view class="framePops">
			<view class="inputWraps">
				<view class="inputWrap">
					<image @tap="queryUser" class="inputImg" src="../../static/img/index/61.png"></image>
					<input v-model="userName" placeholder="搜索" placeholder-style="font-size:28rpx;color:#595959;"
						confirm-type="search" @confirm="queryUser" />
				</view>
			</view>
			<scroll-view v-if="indexType==4" scroll-y="true" @scrolltolower="scrolltolowers" class="userWrap">
				<view v-for="(item,index) in bufenList" :key="index" @tap="item.selectedFlag =!item.selectedFlag"
					class="userView">
					<view class="userLeft">
						<image class="userImg"
							:src="item.avatar?`${httpUrl}/app/file/viewFile?fileId=${item.avatar}`:'../../static/img/userImg.png'">
						</image>
						<text class="userName">{{item.userName}}</text>
					</view>
					<image class="userRight"
						:src="item.selectedFlag?'../../static/img/CheckBoxSelected.png':'../../static/img/checkBox.png'">
					</image>
				</view>
			</scroll-view>
			<scroll-view v-if="indexType==5" scroll-y="true" @scrolltolower="scrolltolowers" class="userWrap">
				<view v-for="(item,index) in bugeiList" :key="index" @tap="item.selectedFlag =!item.selectedFlag"
					class="userView">
					<view class="userLeft">
						<image class="userImg"
							:src="item.avatar?`${httpUrl}/app/file/viewFile?fileId=${item.avatar}`:'../../static/img/userImg.png'">
						</image>
						<text class="userName">{{item.userName}}</text>
					</view>
					<image class="userRight"
						:src="item.selectedFlag?'../../static/img/CheckBoxSelected.png':'../../static/img/checkBox.png'">
					</image>
				</view>
			</scroll-view>
			<view class="bottomWrap">
				<view class="bottom">
					<view class="button">
						<text @tap="closeAll" v-if="indexType==4" class="buttonText">完成（{{selectedCount}}）</text>
						<text @tap="closeAll" v-if="indexType==5" class="buttonText">完成（{{selectedCounts}}）</text>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import { computed, ref } from 'vue'
	import { queryMyCoverFollow, saveTrends, queryUserTrendsInfo } from '@/utils/api/index.ts'
	const imgList = ref<any>([]) //图片数组
	const videoSrc = ref('')  //视频地址
	const title = ref('')  //标题
	const content = ref('')  //内容
	const submit = async () => {
		uni.showLoading({
			title: '正在发布...',
			mask: true
		})
		const list = videoSrc.value ? [videoSrc.value] : imgList.value
		const dataResults = list.join(',');
		const data = {
			title: title.value,
			content: content.value,
			attachmentIds: dataResults,
			approximateAddress: locationObject.value.name,
			detailedAddress: locationObject.value.address,
			longitude: locationObject.value.longitude,
			latitude: locationObject.value.latitude,
			viewAuth: whoToSee.value.key,
			subjectId: talkObject.value.id,
			subjectName: talkObject.value.subjectName,
			fileType: videoSrc.value ? 'VIDEO' : 'PICTURE',
			forwardUserId: forwardUserId.value,
			forwardUserName: forwardUserName.value,
			forwardContent: remark.value,
			forwardTrendsId: forwardTrendsId.value
		}
		const res = await saveTrends({ data: { appUserTrends: data, userIds: whoToSee.value.key == 'PARTIALLY_VISIBLE' ? bufenSelectedUserIds.value : bugeiSelectedUserIds.value } })
		if (res.code == 200) {
			uni.hideToast();
			uni.showToast({
				title: '发布成功',
				icon: 'none'
			})
			setTimeout(() => {
				uni.redirectTo({
					url: '/pages/qiangqiang/qiangqiang'
				})
			}, 100)
		}
	};
	// 预览图片
	const previewImage = (index : number) => {
		const testImg = imgList.value.map((item : any) => {
			return `${httpUrl.value}/app/file/viewFile?fileId=${item}`
		})
		uni.previewImage({
			urls: testImg,
			current: index,
			longPressActions: {
				itemList: ['保存图片'],
				success: function (data) {
					uni.closePreviewImage()
					// 获取当前长按的图片 URL  
					const currentImageUrl = imgList[data.index];
					// 调用保存图片到相册的接口  
					uni.saveImageToPhotosAlbum({
						filePath: currentImageUrl,
						success: function () {
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							});
						},
						fail: function (err) {
							console.error(err);
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							});
						}
					});
				}
			}
		});
	}

	// 选择当前位置
	const locationObject = ref({
		name: '添加位置',
		address: '',
		latitude: 0,
		longitude: 0
	})

	// 选择话题
	const talkObject = ref({
		subjectName: '话题',
		id: ''
	})
	// 打开谁能看见
	const popup = ref<InstanceType<typeof Popup> | null>(null);
	const toWho = () => {
		popup.value.open('bottom')
	}
	// 打开给谁看不给谁看的用户列表
	const popups = ref<InstanceType<typeof Popup> | null>(null);
	// 选择那些人看
	const whoList = ref([{
		key: 'OPEN',
		lable: '公开-所有人可见',
		val: '公开',
		check: true
	}, {
		key: 'INTERRELATION',
		lable: '朋友•互关朋友可见',
		val: '朋友',
		check: false
	}, {
		key: 'CLOSE_FRIEND',
		lable: '密友可见',
		val: '密友',
		check: false
	}, {
		key: 'SEE_YOURSELF',
		lable: '私密 仅自己可见',
		val: '私密',
		check: false
	}, {
		key: 'PARTIALLY_VISIBLE',
		lable: '部分可见',
		val: '部分可见',
		check: false
	}, {
		key: 'NOT_ALLOW_USER',
		lable: '不给谁看',
		val: '不给谁看',
		check: false
	}])
	const whoToSee = ref({
		key: 'OPEN',
		lable: '公开-所有人可见',
		val: '公开',
		check: true
	})
	interface UserType {
		userId : string
		avatar : string
		userName : string
		selectedFlag : boolean
	}
	const bufenList = ref<UserType[]>([])
	const bufenPageNo = ref(1)
	const bugeiList = ref<UserType[]>([])
	const bugeiPageNo = ref(1)
	const httpUrl = ref(getApp().globalData.baseUrl)
	const indexType = ref(0)
	// 请求粉丝列表
	const queryMyCoverFollows = async (index : number) => {
		indexType.value = index
		if (indexType.value == 4 && bufenList.value.length == 0) {
			const res = await queryMyCoverFollow({ data: { pageNo: bufenPageNo.value, pageSize: 10, userName: '' } })
			bufenList.value = res.data.list
		}
		if (indexType.value == 5 && bugeiList.value.length == 0) {
			const res = await queryMyCoverFollow({ data: { pageNo: bugeiPageNo.value, pageSize: 10, userName: '' } })
			bugeiList.value = res.data.list
		}
		popups.value.open('bottom')
	}
	// 触底翻页
	const scrolltolowers = async () => {
		if (indexType.value == 4) {
			bufenPageNo.value = bufenPageNo.value + 1
			const res = await queryMyCoverFollow({ data: { pageNo: bufenPageNo.value, pageSize: 10, userName: userName.value } })
			bufenList.value.push(res.data.list)
		}
		if (indexType.value == 5) {
			bugeiPageNo.value = bugeiPageNo.value + 1
			const res = await queryMyCoverFollow({ data: { pageNo: bugeiPageNo.value, pageSize: 10, userName: userName.value } })
			bugeiList.value.push(res.data.list)
		}
	}
	// 选择类型
	const choosePop = (index : number) => {
		whoList.value.map((item) => {
			item.check = false
		})
		whoList.value[index].check = true
		whoToSee.value = whoList.value[index]
		if (index > 3) {
			userName.value = ''
			queryMyCoverFollows(index)
		} else {
			setTimeout(() => {
				popup.value.close()
			}, 100)
		}
	}
	const closeAll = () => {
		popups.value.close()
		popup.value.close()
	}
	// 搜索用户
	const userName = ref('')
	const queryUser = async () => {
		if (indexType.value == 4) {
			const res = await queryMyCoverFollow({ data: { pageNo: 1, pageSize: 10, userName: userName.value } })
			bufenList.value = res.data.list
		}
		if (indexType.value == 5) {
			const res = await queryMyCoverFollow({ data: { pageNo: 1, pageSize: 10, userName: userName.value } })
			bugeiList.value = res.data.list
		}
	}
	const selectedCount = computed(() => bufenList.value.filter(user => user.selectedFlag).length);
	const bufenSelectedUserIds = computed(() => bufenList.value.filter(user => user.selectedFlag).map(user => user.userId));
	const selectedCounts = computed(() => bugeiList.value.filter(user => user.selectedFlag).length);
	const bugeiSelectedUserIds = computed(() => bugeiList.value.filter(user => user.selectedFlag).map(user => user.userId));

	const remark = ref('')  //对人家的墙墙发布评论
	const forwardUserId = ref('') //被转发人的id
	const forwardUserName = ref('')  //被转发人的名称
	const forwardTrendsId = ref('')  //被转发人的墙墙id
	const attachFiles=ref<any>([])
	onLoad(async (option) => {
		const res = await queryUserTrendsInfo({ data: { trendsId: option.id } })
		forwardUserId.value = res.data.appUserTrends.userId
		forwardUserName.value = res.data.queryUserHomeResponse.userName
		forwardTrendsId.value = res.data.appUserTrends.id
		if (res.data.appUserTrends.fileType == 'PICTURE') {
			imgList.value = res.data.appUserTrends.attachmentIds.split(',')
		} else {
			videoSrc.value = res.data.appUserTrends.attachmentIds.split(',')
		}
		attachFiles.value = res.data.appUserTrends.attachFiles
		title.value = res.data.appUserTrends.title
		content.value = res.data.appUserTrends.content
		locationObject.value = {
			name: res.data.appUserTrends.approximateAddress,
			address: res.data.appUserTrends.detailedAddress,
			latitude: res.data.appUserTrends.latitude,
			longitude: res.data.appUserTrends.longitude
		}
		talkObject.value = {
			subjectName: res.data.appUserTrends.subjectName,
			id: res.data.appUserTrends.subjectId
		}
	})
</script>

<style lang="scss" scoped>
	.imageList {
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		flex-wrap: wrap;

		.videoWrap {
			width: 80%;
			height: 400rpx;
			margin-left: 10%;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			position: relative;

			.video {
				width: 100%;
				height: 368rpx;
				background: #000;
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.closes {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				z-index: 2;
				top: -20rpx;
				right: -20rpx;
			}
		}

		.imgWrap {
			width: 200rpx;
			height: 200rpx;
			margin-left: 4%;
			border-radius: 16rpx;
			margin-top: 20rpx;
			position: relative;

			.img {
				width: 200rpx;
				height: 200rpx;
				border-radius: 16rpx;
			}

			.close {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				z-index: 2;
				top: -15rpx;
				right: -15rpx;
			}
		}

		.addImg {
			background: #F5F5F5;
			border: 2rpx dashed #BFBFBF;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
	}

	.remarkWrap {
		width: 92%;
		height: 324rpx;
		margin-left: 4%;
		margin-top: 20rpx;
		border-bottom: 2rpx solid #E5E5E5;
		display: flex;
		align-items: center;
	}

	.titleWrap {
		width: 92%;
		height: 100rpx;
		margin-left: 4%;
		margin-top: 20rpx;
		border-bottom: 2rpx solid #E5E5E5;
		display: flex;
		align-items: center;
	}

	.detailsWrap {
		width: 92%;
		height: 424rpx;
		margin-left: 4%;
		margin-top: 20rpx;

		.sparkleWrap {
			width: 100%;
			height: 114rpx;
			display: flex;
			align-items: center;

			.sparkle {
				height: 58rpx;
				background: #F5F5F5;
				border-radius: 29rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.location {
					width: 32rpx;
					height: 32rpx;
					margin-left: 29rpx;
				}

				.chevronRight {
					width: 32rpx;
					height: 32rpx;
					margin-right: 15rpx;
				}
			}
		}
	}

	.whoWrap {
		width: 92%;
		height: 106rpx;
		margin-left: 4%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.whoLeft {
			display: flex;
			align-items: center;
		}

		.whoRight {
			min-width: 136rpx;
			height: 58rpx;
			background: #F5F5F5;
			border-radius: 29rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.whoRightImg {
				width: 32rpx;
				height: 32rpx;
				margin-left: 5rpx;
			}
		}
	}

	.releaseWrap {
		width: 100%;
		height: 188rpx;
		background: #fff;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		justify-content: center;

		.quxiao {
			width: 160rpx;
			height: 86rpx;
			margin-top: 20rpx;
			background: #F4F6FA;
			border-radius: 40rpx;
			font-size: 32rpx;
			color: #262626;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.release {
			width: 462rpx;
			height: 86rpx;
			margin-top: 20rpx;
			background: #6B64D3;
			margin-left: 32rpx;
			border-radius: 40rpx;
			font-size: 32rpx;
			color: #fff;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.beijing {
		width: 100%;
		height: 400rpx;
		background: #F6F7F9;
	}

	.framePop {
		width: 100%;
		height: 734rpx;
		background: #F4F6FA;
		padding-top: 48rpx;
		border-radius: 32rpx 32rpx 0rpx 0rpx;

		.inputWrap {
			width: 100%;
			height: 74rpx;
			background: #F5F5F5;
			border-radius: 37rpx;
			display: flex;
			align-items: center;

			.inputImg {
				width: 32rpx;
				height: 32rpx;
				margin-left: 32rpx;
				margin-right: 10rpx;
			}
		}

		.topPop {
			width: 94%;
			height: 402rpx;
			margin-left: 3%;
			background: #FFFFFF;
			border-radius: 24rpx;

			.pop {
				width: 100%;
				height: 88rpx;
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.popText {
					color: #262626;
					font-size: 28rpx;
					margin-left: 24rpx;
				}
			}
		}

		.bottomPop {
			width: 94%;
			height: 206rpx;
			margin-left: 3%;
			margin-top: 10rpx;
			background: #FFFFFF;
			border-radius: 24rpx;

			.pop {
				width: 100%;
				height: 88rpx;
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.popText {
					color: #262626;
					font-size: 28rpx;
					margin-left: 24rpx;
				}
			}
		}
	}

	.framePops {
		width: 100%;
		height: 946rpx;
		padding-top: 48rpx;
		background: #F4F6FA;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		position: relative;

		.userWrap {
			width: 100%;
			height: 580rpx;
			background: #fff;
			border-radius: 24rpx;
			margin-top: 24rpx;

			.userView {
				width: 100%;
				height: 104rpx;
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.userLeft {
					margin-left: 24rpx;
					display: flex;
					align-items: center;

					.userImg {
						width: 64rpx;
						height: 64rpx;
						border-radius: 32rpx;
					}

					.userName {
						color: #262626;
						font-size: 28rpx;
						margin-left: 8rpx;
					}
				}

				.userRight {
					width: 36rpx;
					height: 36rpx;
					margin-right: 24rpx;
				}
			}
		}

		.bottomWrap {
			width: 100%;
			height: 164rpx;
			background: #fff;
			position: fixed;
			bottom: 0;

			.bottom {
				width: 100%;
				height: 96rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.button {
					width: 686rpx;
					height: 80rpx;
					background: #6B64D3;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.buttonText {
						font-size: 32rpx;
						font-weight: bold;
						color: #fff;
					}
				}
			}
		}


		.inputWraps {
			width: 100%;
			height: 106rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.inputWrap {
				width: 90%;
				height: 74rpx;
				background: rgba(245, 245, 245, 0.9);
				border-radius: 37rpx;
				display: flex;
				align-items: center;

				.inputImg {
					width: 32rpx;
					height: 32rpx;
					margin-left: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.videoPopups {
		width: 100%;
		height: 320rpx;
		background: #fff;
		color: #262626;
		font-size: 32rpx;

		.choosePopup {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>